<!-- 护理项目列表页 -->

<template>
  <div class="min-h serveProject bg-wt">
    <SearchForm
    :searchData="pagination"
    @handleClear="handleClear"
    @handleReset="handleReset"
    @handleSearch="getList"
    ></SearchForm>
    <TableList
    :data="data"
    :bordered="bordered"
    :hover="hover"
    :size="size"
    :total="total"
    :pagination="pagination"
    @onPageChange="onPageChange"
    @handleBuild="handleBuild"
    @handleEdit="handleEdit"
    ></TableList>

    <DialogForm
    ref="formRef"
    :visible="visible"
    :title="title"
    :data="fromDataRef"
    @handleClose="handleClose"
    @handleAdd="handleAdd"
    @handleEdit="handleEditFrom"
    ></DialogForm>
  </div>

</template>

<script setup lang="jsx">
import { onMounted, ref } from 'vue';
import { getProjectDetails, getProjectList, projectAdd, projectUpdate } from '@/api/serve';

//导入子组件
import TableList from './components/TableList.vue';
import SearchForm from './components/SearchForm.vue';
import { MessagePlugin } from 'tdesign-vue-next';
import DialogForm from './components/DialogForm.vue';

const bordered = ref(true);
const hover = ref(false);
const size = ref('medium');



const pagination = ref({
  pageNum: 1,
  pageSize: 5
})
const onPageChange = (pageInfo) => {
  console.log(pageInfo)

  //当页码或每页大小改变更新pagenation中的数据
  pagination.value.pageNum = pageInfo.current
  pagination.value.pageSize = pageInfo.pageSize

  getList()
}

const data = ref([])
const total = ref(0)

//远程调用分页查询
const getList = async () =>{
  const result = await getProjectList(pagination.value)
  if(result.code == 200){
    data.value = result.data.records
    total.value = result.data.total
  }
}
onMounted(() =>{
  getList()
})


//handleClear,清除当前表单元素
const handleClear = (val) =>{
  if(val =="name"){
    pagination.value.name=''
  }else if(val == 'status'){
    delete pagination.value.status
  }
  getList()
}

//handleReset,重置表单所有数据
const handleReset = () =>{
  pagination.value = {
    pageNum:1,
    pageSize:5
  }
  getList()
}

//新增对话框-操作逻辑
const visible=ref(false)
const title=ref('')
const formRef=ref({})

//事件-新增按钮
const handleBuild = ()=>{
  title.value = '新增'
  visible.value = true
}

//关闭 “新增或修改对话框"
const handleClose = () =>{
  visible.value=false
}

//点击事件-新增护理项目
const handleAdd = async (formData) =>{
  //1.远程调用新增护理接口
  const result = await projectAdd(formData)
  //2.判断返回code是否为200
  if(result.code == 200){
    //2.1成功
    //提示成功
    MessagePlugin.success("操作成功")
    //关闭对话框
    visible.value = false
    //清空表单数据
    formRef.value.handleClear()
    //重新查询
    getList()
  } else {
    //2.2失败，弹出失败消息
    MessagePlugin.error(result.msg)
  }
}

const fromDataRef = ref([])
const handleEdit = async(id) =>{
  const result = await getProjectDetails(id)
  if(result.code == 200){
    fromDataRef.value = result.data
    title.value = '编辑'
    visible.value = true
  } else {
    MessagePlugin.error(result.msg)
  }
}

const handleEditFrom = async (fromData) =>{
  const result = await projectUpdate(fromData)
  if(result.code == 200){
    MessagePlugin.success('修改成功')

    visible.value = false
    formRef.value.handleClear()
    getList()
  } else {
    MessagePlugin.error(result.msg)
  }
}

</script>

